<template>
    <div class="buyrecords">
        <view-box ref="viewBox">
            <ul>
                <li v-for="(item,index) in orders" :key="index" @click="tapindex=index;show=true">
                    <div v-if="item.gift" class="topinfo">
                        <img :src="item.gift.icon" alt="">
                        <div class="rightinfo">
                            <h6>{{item.gift.name}}</h6>
                            <strong><b>{{item.gift.price}}</b>彩豆</strong>
                            <span>兑换时间：2017-08-22 17:23</span>
                        </div>
                    </div>
                    <div class="bottominfo">
                        <span><strong>收货信息</strong><icon name="right"/></span>
                    </div>
                </li>
            </ul>
        </view-box>
        <div v-transfer-dom v-if="tapindex>-1">
            <popup v-model="show">
                <div class="popupshow">
                    <label for=""> <span>收件人：</span> <strong>{{orders[tapindex]|getname}}</strong></label>
                    <label for=""> <span>联系电话：</span> <strong>{{orders[tapindex]|getcontact}}</strong></label>
                    <label for=""> <span>收件地址：</span> <strong>{{orders[tapindex]|getaddress}}</strong></label>
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {getExchargeListR} from '../../service/shop';
    import {isEmpty} from 'ramda';
    import {isphone} from '../../uitls/common';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {ViewBox, Popup, TransferDom} from 'vux';

    export default {
        directives: {
            TransferDom
        },
        components: {
            myButton: Button,
            DomLoad,
            ViewBox,
            Popup
        },
        filters: {
            getname: function (obj) {
                const {name}=obj;
                return name || '';
            },
            getcontact: function (obj) {
                const {contact}=obj;
                return contact || '';
            },
            getaddress: function (obj) {
                const {address}=obj;
                return address || '';
            },
        },
        data() {
            return {
                orders: [],
                show: true,
                tapindex: -1
            };
        },
        created() {
            this.getdata();
        },
        computed: {},
        methods: {
            async getdata(){
                const {token}=await getMytoken();
                const {data}=await getExchargeListR(token);
                if(data && data.code === 0) {
                    this.orders = data.data.orders;
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .buyrecords {
        background: #fff;
        ul {
            padding: 0 24px 0 30px;
            li {
                height: 228px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                border-bottom: 1px solid @color12;
                &:last-child {
                    border: none;
                }
                .topinfo {
                    display: flex;
                    img {
                        width: 120px;
                        height: 120px;
                        border-radius: 6px;
                        margin-right: 20px;
                    }
                    .rightinfo {
                        display: flex;
                        flex: 1;
                        flex-direction: column;
                        h6 {
                            font-size: @fz30;
                        }
                        strong {
                            color: @color3;
                            font-size: @fz28;
                            b {
                                color: @color22;
                            }
                        }
                        span {
                            color: @color3;
                            font-size: @fz24;
                        }
                    }
                }
                .bottominfo {
                    display: flex;
                    padding-left: 140px;
                    margin-top: 20px;
                    font-size: @fz28;
                    color: @color2;
                    span {
                        flex: 1;
                        display: flex;
                        align-items: center;
                    }
                    strong {
                        flex: 1;
                    }
                    svg {
                        color: @color4;
                    }
                }
            }
        }
    }

    .popupshow {
        background: #fff;
        label {
            padding: 20px;
            display: flex;
        }

    }
</style>